<template>
  <div ref="canvas"></div>
</template>

<script lang="ts" setup>
// 贝塞尔曲线
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import { ref, onMounted } from "vue";
import {AxesHelper} from "three";

// 画布
const canvas = ref<any>('');
// 场景
const scene = new THREE.Scene();
// 贝塞尔曲线
// p1、p2、p3表示三个点坐标
// p1、p3是曲线起始点，p2是曲线的控制点

// 二维二次贝赛尔曲线
// const p1 = new THREE.Vector2(-80, 0);
// const p2 = new THREE.Vector2(20, 100);
// const p3 = new THREE.Vector2(80, 0);
// const curve = new THREE.QuadraticBezierCurve(p1, p2, p3);

// 三维二次贝赛尔曲线
const p1 = new THREE.Vector3(-80, 0, 0);
const p2 = new THREE.Vector3(20, 100, 0);
const p3 = new THREE.Vector3(80, 0, 100);
const curve = new THREE.QuadraticBezierCurve3(p1, p2, p3);

// 获取曲线上的点
const points = curve.getPoints(200);
// 几何体 - 线
const lineGeometry = new THREE.BufferGeometry();
lineGeometry.setFromPoints(points);
// 几何体 - 点
const pointGeometry = new THREE.BufferGeometry();
pointGeometry.setFromPoints([p1, p2, p3]);
// 材质
const lineMaterial = new THREE.LineBasicMaterial({
  color: 0x00ffff,
  side: THREE.DoubleSide,
});
const pointMaterial = new THREE.PointsMaterial({
  color: 0xff00ff,
  side: THREE.DoubleSide,
  size: 10,
});
// 网格模型 - 线
const line = new THREE.Line(lineGeometry, lineMaterial);
scene.add(line);
// 网格模型 - 点
const pointMesh = new THREE.Points(pointGeometry, pointMaterial);
scene.add(pointMesh);
// 辅助坐标系
scene.add(new AxesHelper(200));
// 相机
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 2000);
camera.position.set(200, 200, 200);
camera.lookAt(line.position);
// 渲染器
const renderer = new THREE.WebGLRenderer({
  antialias: true,
});
renderer.setClearColor(0xffffff);
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
// 渲染函数
const render = () => {
  renderer.render(scene, camera);
  requestAnimationFrame(render);
};
//  相机控件
const orbitControl = new OrbitControls(camera, renderer.domElement);
orbitControl.update();

onMounted(() => {
  canvas.value.appendChild(renderer.domElement);
  render();
});

</script>
